
<template>

    <div class="answerView">

        <mt-header  fixed title="回答" class="header">
            <router-link to="/answer" slot="left">
            <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>

        
   
      <div class="container" style="margin-bottom: 20px;margin:5%;">

       <div class="titi">  {{questionsTitle}}   </div>
            
            <textarea autofocus v-model="newMsg" class="form-control" style="resize: none;height: 150px;" placeholder="请输入你的回答" @keyup.enter="addMsg"></textarea>
            <br>
            <button @click="addMsg" class="btn btn-primary btn-block">提交</button>
        </div>
        <div class="container">
            <div class="panel panel-default" >
                <div class="panel-heading">回答列表</div>

                <div class="panel-body">
                    <ul class="list-group">           
                        <li class="list-group-item"  style="float:left;width: 95%;text-align: left;" v-for="(msg,index) in msgs">
                        <br> <div class="cricless"></div>{{msg.username}}：</br>
                        <br>{{ msg.title }}
                        <i class="el-icon-delete2" style="float: right;" v-show="msg.username==username" v-on:click="deleteMsgs(index)"></i>
                        </br>
                        </li>
                    </ul>

                    
                    <button @click="removeMsgs" v-show="msgs.length > 0" class="btn btn-danger btn-block">清空回答</button>
                </div>
            </div>
        </div>
    </div>
 


</template>
<script>

import axios from 'axios'
import {mapMutations} from "vuex"
import  {mapState} from "vuex"


  var STORAGE_KEY = 'vue-liuyanban'
        var msgStorage = {
            fetch: function() {
                var msgs = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
                msgs.forEach(function(msg, index) {
                    msg.id = index
                })
                msgStorage.uid = msgs.length
                return msgs
            },
            save: function(msgs) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(msgs))
            }
        }

     export default {
         name:"answerView",
      data() {
            return {
                username:'',
                msgs: msgStorage.fetch(),
                newMsg: '',
                title:''
               
                
                
            }
        },

        computed:{

            questionsTitle(){
                return this.$store.state.books[this.$store.state.books_id].title;
            },
              ...mapState({
                btn:state =>state.btn
            })

        },
         
     watch: {
                msgs: {
                    handler: function(msgs) {
                        msgStorage.save(msgs)
                    },
                    deep: true
                }
            },
        mounted(){
            this.getUser();

         //   this.getAnswer();
           

        },
        
    methods: {
        
             getUser(){
                var _this = this;
                this.$http.post('/users/user').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        console.log('用户未登录')
                    } else if (res.data.result == 1) {
                        console.log('已登录')
                        console.log(res.data);
                        _this.username = res.data.username;
                        _this.sid = res.data.sid
                        console.log(_this.username);
                        console.log(_this.sid);
                       

                    }
                })
               
            },
             

             /*      getAnswer(){
                var _this = this;
                this.$http.post('/users/answer').then(function (res) {
                    if (res.data.result == 0) {
                        _this.username = '';
                        _this.title = '';
                        console.log('无数据')
                    } else if (res.data.result == 1) {
                        console.log('数据已传递')
                        console.log(res.data);
                        _this.username = res.data.username;
                        _this.title = res.data.title
                        console.log(_this.username);
                        console.log(_this.title);
                       

                    }
                })
               
            },

*/
                   ...mapMutations([
                'changeBtn' // 映射 this.increment() 为 this.$store.commit('increment')
            ]),

        
          
            addMsg: function() {
                    var value = this.newMsg && this.newMsg.trim()
                    var _this = this;
                    var username = _this.username;

                    this.$http.post('/users/user').then(function (res) {
                        _this.username = res.data.username;
                       
                         if(username==undefined){
                         alert:('请先登录！')
                        _this.$router.push({path:'/login/login'})
                    }else if(username==''){
                         alert:('请先登录！')
                        _this.$router.push({path:'/login/login'})
                    }
                     else{
                         if (!value) {
                            return
                         }
                         _this.msgs.push({
                            id: msgStorage.uid++,
                            title: value,
                            username:_this.username
                         })

                         var params = new URLSearchParams();
                         params.append('title',_this.value);
                         params.append('username',_this.username);
                         axios.post('/users/answer',params).then(function(res){
                             
                            // res.data.username = _this.username;
                            //console.log(res.data.username);
                            

                             if(res.data.result){
                                 //res.data.username = _this.username;
                                // console.log(res.data.result);
                                
                                 console.log(res.data.username);
                               //  _this.$router.push({path:'',query:{username:res.data.username}})
                                 _this.changeBtn();
                             }else{
                                 alert("404")
                             }
                           }).catch(function (err) {
                                console.log(err);

                         })

                         _this.$store.commit("changeStyle",4);
                         _this.newMsg = ''
                    }
                        
                    })                 
                  
           },

              

            removeMsgs: function() {
                    msgStorage.uid = 0;
                    return this.msgs = [];
                },

             deleteMsgs: function(index) {
                  
                  this.msgs.splice(index,1);
                     
             }


           },      
     
      }
</script>
<style >

.answerView {
    font-family: "Microsoft YaHei";
}

.titi {
    margin:15% 5% 10% 15%;
    float:left;
    margin-left: 5%;
    text-align: left;
}

.cricless {
        background-color: #339933;
        width:5%;
        height:16px;
        float: left;
        margin: 1%;
        border: 2px #339933 solid;
        border-radius:50%;
}



  
</style>